<template>
	<view>
		<!-- 顶部选项卡 -->
		<scroll-view scroll-x scroll-with-animation :scroll-into-view="scrollInto" class="scroll-row" style="height: 100rpx;">
			<view v-for="(item, index) in tabBars" :key="index" 
			class="scroll-row-item px-3 py-2 font-md " :id="'tab' + index"
			:class="tabIndex === index ? 'text-main font-lg font-weight-bold' : ''"
			@click="changeTab(index, item)">
				{{item.name}}</view>
		</scroll-view>
		<!-- 中间内容滑块 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH +'px;'">
			<swiper-item class="swiper-item" v-for="(item, index) in newsList" :key="index">
				<scroll-view @scrolltolower="loadmore(index)" scroll-y="true" :style="'height:'+scrollH +'px;'" >
					<template v-if="item.list.length > 0">
						<block v-for="(item1, index1) in item.list" :key="index1">
							<!-- 列表样式 -->
							<topic-list :item="item1" :index="index1"></topic-list>
							<!-- 全局分隔线 -->
							<divider></divider>
						</block>
						<!-- 上拉加载 -->
						<!-- <load-more :loadmore="item.loadMore"></load-more> -->
					</template>
					<template v-else>
						<no-thing></no-thing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [{
		cover: '/static/demo/topicpic/1.jpeg', //图片
		title: '话题名称哈哈哈',
		desc: '话题描述',
		today_count: 5,//今日
		news_count: 10, //动态
	},
	{
		cover: '/static/demo/topicpic/1.jpeg', //图片
		title: '话题名称哈哈哈',
		desc: '话题描述',
		today_count: 10,//今日
		news_count: 10, //动态
	},
	{
		cover: '/static/demo/topicpic/1.jpeg', //图片
		title: '话题名称哈哈哈',
		desc: '话题描述',
		today_count: 0,//今日
		news_count: 10, //动态
	},
	{
		cover: '/static/demo/topicpic/1.jpeg', //图片
		title: '话题名称哈哈哈',
		desc: '话题描述',
		today_count: 6,//今日
		news_count: 10, //动态
	},
	{
		cover: '/static/demo/topicpic/1.jpeg', //图片
		title: '话题名称哈哈哈',
		desc: '话题描述',
		today_count: 8,//今日
		news_count: 10, //动态
	},
	{
		cover: '/static/demo/topicpic/1.jpeg', //图片
		title: '话题名称哈哈哈',
		desc: '话题描述',
		today_count: 4,//今日
		news_count: 10, //动态
	},
	{
		cover: '/static/demo/topicpic/1.jpeg', //图片
		title: '话题名称哈哈哈',
		desc: '话题描述',
		today_count: 6,//今日
		news_count: 10, //动态
	}]
	import topicList from '@/components/news/topic-list.vue';
	import loadMore from '@/components/common/load-more.vue';
	export default {
		components: {
			topicList,
			loadMore
		},
		data() {
			return {
				scrollH: 600,
				tabIndex: 0,
				scrollInto: '',
				// 顶部选项卡
				tabBars: [{
						name: '关注',
						id: 1
					},
					{
						name: '推荐',
						id: 2
					},
					{
						name: '体育',
						id: 3
					},
					{
						name: '热点',
						id: 4
					},
					{
						name: '财经',
						id: 5
					},
					{
						name: '娱乐',
						id: 6
					},
					{
						name: '军事',
						id: 7
					},
					{
						name: '历史',
						id: 8
					},
					{
						name: '本地',
						id: 9
					},
				],
				newsList: [{
					list: []
				}]
			}
		},
		// 监听点击导航搜索栏 (disabled状态才可以点击)
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:"../search/search"
			})
		},
		// 监听点击导航按钮
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../add-input/add-input',
			});
		},
		onLoad() {
			uni.getSystemInfo({  //异步获取系统信息
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(100)
				}
			})
			
			// 根据选项生成列表
			this.getData();
			
		},
		methods: {
			// 获取数据
			getData() {
				let arr = []
				for (var i = 0; i < this.tabBars.length; i++) {
					 // 生成列表模板
					let obj = {
						// 1、上拉加载更多 2.加载中... 3.没有了
						loadMore: "上拉加载更多",
						list: []
					}
					if(i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
			// 切换中间内容滑块
			onChangeTab(e) {
				this.tabIndex = e.detail.current
			},
			// 切换选项卡
			changeTab(index) {
				if(this.tabIndex === index) {
					return;
				}
				this.tabIndex = index;
				//滚动到指定元素
				this.scrollInto = 'tab' + index
				
			},
			//关注
			follow(e) {
				this.newsList[this.tabIndex].list[e].isFollow = true
				uni.showToast({
					title: '关注成功！'
				})
			},
			//顶踩操作
			doSupport(e) {
				let type = e.type;
				let msg = type === 'support' ? '顶' : '踩';
				let item = this.newsList[this.tabIndex].list[e.index]
				// 未操作
				if (item.support.type === '') {
					item.support[type + '_count']++;
				} else if (item.support.type === 'support' && type === 'unsupport') {
					// 之前顶了，现在踩
					// 顶 -1
					item.support.support_count--;
					// 踩 + 1
					item.support.unsupport_count++;
				} else if (item.support.type === 'unsupport' && type === 'support') {
					// 之前踩现在顶
					// 顶 + 1
					item.support.support_count++;
					//踩 -1
					item.support.unsupport_count--;
				}
				item.support.type = type;
				uni.showToast({
					title: msg + '成功'
				})
			},
			// 上拉加载更多
			loadmore(index) {
				// 拿到当前列表
				let item=this.newsList[index];
				// 判断是否处于可加载状态
				if(item.loadMore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				this.newsList[index].loadMore = '加载中...';
				console.log("上拉加载更多")
				// 模拟数据请求
				setTimeout(() => {
					// 加载数据
					item.list = [...item.list, ...item.list];
					// 恢复加载状态
					this.newsList[index].loadMore = '上拉加载更多'
				}, 2000)
			}
		}
	}
</script>

<style>

</style>